* {margin:0;padding:0;box-sizing:border-box}
html,body {
  height:100%;
  background:black;
  overflow:hidden;
  font-family:'Orbitron',monospace;
  color:#00ffff;
}
canvas {display:block;background:linear-gradient(to bottom,#0a001a,#310045)}

#hud,#gameOver,#menu,#controls,#fire,#introScreen,#pauseBtn {
  position:absolute;z-index:10;color:#00ffff;font-size:18px;
}
#hud {top:10px;left:10px}
#gameOver {
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:#ff0066;font-size:32px;display:none;text-align:center;z-index:20;
  /* === Efek blur saat game over === */
body.blur-active canvas {
  filter: blur(6px);
  transition: filter 0.5s ease;
}

body.blur-active #hud,
body.blur-active #controls,
body.blur-active #fire,
body.blur-active #pauseBtn,
body.blur-active #fullscreenBtn {
  filter: blur(6px);
  pointer-events: none;
}
}
#restartBtn {
  margin-top:12px;padding:8px 20px;background:#ff00ff;color:#fff;
  border:none;border-radius:8px;font-size:16px;cursor:pointer;
}
.btn {
  background:rgba(255,255,255,0.03);border:2px solid #00ffff;border-radius:50%;
  width:56px;height:56px;text-align:center;line-height:56px;
  color:#00ffff;font-size:18px;user-select:none;touch-action:none;
}
#kembalitBtn {
  margin-top:12px;padding:8px 20px;background:#ff00ff;color:#fff;
  border:none;border-radius:8px;font-size:16px;cursor:pointer;
}
.btn {
  background:rgba(255,255,255,0.03);border:2px solid #00ffff;border-radius:50%;
  width:56px;height:56px;text-align:center;line-height:56px;
  color:#00ffff;font-size:18px;user-select:none;touch-action:none;
}
#controls {bottom:200px;left:18px}
#btn-up{position:absolute;top:-64px;left:60px}
#btn-down{position:absolute;top:72px;left:60px}
#btn-left{position:absolute;top:0;left:-10px}
#btn-right{position:absolute;top:0;left:130px}
#fire {
  bottom:140px;right:30px;width:78px;height:78px;border-radius:50%;
  font-size:16px;font-weight:bold;color:#fff;background:#ff00ff;
  border:none;z-index:20;box-shadow:0 0 12px #ff00ff;touch-action:none;
}
#menu {
  top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;z-index:100;
}
#menu button {
  margin:8px;padding:10px 18px;font-size:18px;background:#111;color:#0ff;
  border:2px solid #0ff;border-radius:8px;cursor:pointer;
}
#introScreen {
  top:0;left:0;width:100%;height:100%;
  background:black;display:flex;align-items:center;justify-content:center;
  flex-direction:column;z-index:999;
}
#introText {font-size:26px;color:#00ffff;animation:fadeInOut 3s ease-in-out}
@keyframes fadeInOut {
  0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}
}
#pauseBtn {
  top:10px;right:10px;background:rgba(0,0,0,0.5);
  padding:8px 12px;border-radius:8px;border:2px solid #00ffff;cursor:pointer;
}
#fullscreenBtn {
  top:50px;right:10px;background:rgba(0,0,0,0.5);
  padding:8px 12px;border-radius:8px;border:2px solid #00ffff;cursor:pointer;
}
@media (max-width:600px){
  #hud{font-size:16px}
  #introText{font-size:20px}
}
/* === Efek blur standar saat Game Over === */
body.blur-active canvas,
body.blur-active #hud,
body.blur-active #controls,
body.blur-active #fire,
body.blur-active #pauseBtn,
body.blur-active #fullscreenBtn {
  filter: blur(6px);
  transition: filter 0.4s ease;
  pointer-events: none;
}

/* Kotak Game Over sederhana tanpa bingkai tebal */
#gameOver {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ff0066;
  font-size: 32px;
  text-align: center;
  z-index: 999;
  display: none;
  backdrop-filter: blur(15px); /* blur di belakang teks */
  background: rgba(0, 0, 0, 0.25); /* tipis aja biar teks jelas */
  padding: 20px 30px;
  border-radius: 10px;
}

/* Tombol di Game Over (simple flat style) */
#gameOver button {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  background: #ff00ff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
#gameOver button:hover {
  background: #ff55ff;
}

/* === Health Bar === */
#healthBarContainer {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 150px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  z-index: 15;
}

#healthBar {
  height: 100%;
  width: 100%; /* mulai penuh */
  background: linear-gradient(90deg, #00ff88, #00ff00);
  border-radius: 4px;
  transition: width 0.3s ease, background 0.3s ease;
}